<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
 
<script src="${pageContext.request.contextPath }/statics/js/amcharts.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath }/statics/js/serial.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath }/statics/js/pie.js" type="text/javascript"></script>
<style type="text/css">
.main
{
	width: 50%;
 	height: 400px; 
	border: 1px solid #ccc;
	margin: 0 auto;
	margin-top:1%;
	overflow: hidden;
}
#cylindrical
{
	
	height: 400px;
	margin-top: -15px;
}
#line
{
	width: 700px;
	height: 400px;
	margin-top: -15px;
}
#pie
{
	width: 700px;
	height: 400px;
	margin-top: -15px;
}
</style>


<!-- 统计管理模块 -->
 <div role="tabpanel" class="tab-pane" id="regu" onload="showCampus()">

	
	<div class="main" style="height: 30px;border: none;margin-top: 8%;">
		<button class="btn btn-yellow btn-xs" onclick="showCampus()">校区报名统计</button>
		<button class="btn btn-yellow btn-xs" onclick="showzxs()">咨询师报名统计</button>
	</div>	
	<div class="main" style="display: none;" id="campusTJ">
		<div >
 			<span>各校区本月报名人数统计表</span>
    		<div id="cylindrical" >
   
    		</div>
    	</div>
    	<br>  	
	</div>
	
	
	<div class="main" id="zxsTJ" style="height: 400px;overflow:auto;">
		<div style="height: auto;">
		<table class="table table-condensed">
					<caption>咨询师本月报名人数统计表</caption>
						<thead>
							<tr>
								<th>排名</th>
								<th>姓名</th>
								<th>报档人数</th>
								<th>所属部门</th>
								</tr>
						</thead>
						<tbody id="zxsTbody">
							
							
							
							
						</tbody>
						
				</table>
				
    	</div>
	</div>
	
	
<br />
<!--  --折线图
<div class="main">
    <div id="line">
    </div>
</div>
<br /> -->
<!--
--饼图
<div class="main">
    <div id="pie">
    </div>
</div> 

-->
 
</div>

<script type="text/javascript">


    var json = [
  { "name": "航天桥校区", "value": "1235"},
  { "name": "数据2", "value": "1260" },
  { "name": "数据3", "value": "1422" },
  { "name": "数据4", "value": "1120" },
  { "name": "数据5", "value": "1520" }, 
  { "name": "数据6", "value": "1136" },
  { "name": "数据7", "value": "1420" },
  { "name": "数据8", "value": "1390" }
  ];


	//显示校区排名
	function showCampus(){
		$("#zxsTJ").hide();
		$("#campusTJ").show();
		$.ajax({
			url:"${pageContext.request.contextPath }/statistics",
			dataType:"JSON",
			type:"POST",
			success:function(data){
			console.log(data);
			GetSerialChart(data);
			},
			error:function(){
			
			}
		
		});
	}
	
	//显示咨询师排名
	function showzxs(){
		$("#zxsTJ").show();
		$("#campusTJ").hide();
		$.ajax({
			url:"${pageContext.request.contextPath }/getzxsStatistics",
			dataType:"JSON",
			type:"POST",
			success:function(data){
			var index=1;
			var str;
			console.log(data);
			$.each(data,function(){
				     str+= "<tr> "
						+"<td>"+index+++"</td>"
						+"<td>"+this.teachername+"</td>"
						+"<td>"+this.count+"</td>"
						+"<td>"+this.departmentname+"</td>"
						+"</tr>";
			});
			
			$("#zxsTbody").html(str);
			},
			error:function(){
			
			}
		});
	
	}
	
	

    $(document).ready(function (e) {
    	showCampus();
       // GetSerialChart(json);
       // MakeChart(json);
        zx(json);
    });
    

    //柱状图  
    function GetSerialChart(json) {

        chart = new AmCharts.AmSerialChart();
        chart.dataProvider = json;
        //json数据的key  
        chart.categoryField = "campusname";
        //不选择      
        chart.rotate = false;
        //值越大柱状图面积越大  
        chart.depth3D = 30;
        //柱子旋转角度角度
        chart.angle = 30;
        var mCtCategoryAxis = chart.categoryAxis;
        mCtCategoryAxis.axisColor = "#efefef";
        //背景颜色透明度
        mCtCategoryAxis.fillAlpha = 0.5;
        //背景边框线透明度
        mCtCategoryAxis.gridAlpha = 0;
        mCtCategoryAxis.fillColor = "#efefef";
        var valueAxis = new AmCharts.ValueAxis();
        //左边刻度线颜色  
        valueAxis.axisColor = "#ccc";
        //标题
        valueAxis.title = "";
        //刻度线透明度
        valueAxis.gridAlpha = 0.2;
        chart.addValueAxis(valueAxis);
        var graph = new AmCharts.AmGraph();
        graph.title = "count";
        graph.valueField = "count";
        graph.type = "column";
        //鼠标移入提示信息
        graph.balloonText = "[[category]] 报名人数[[count]]";
        //边框透明度
        graph.lineAlpha = 0.3;
        //填充颜色 
        graph.fillColors = "#b9121b";
        graph.fillAlphas = 1;

        chart.addGraph(graph);

        // CURSOR
        var chartCursor = new AmCharts.ChartCursor();
        chartCursor.cursorAlpha = 0;
        chartCursor.zoomable = false;
        chartCursor.categoryBalloonEnabled = false;
        chart.addChartCursor(chartCursor);

        chart.creditsPosition = "top-right";

        //显示在Main div中
        chart.write("cylindrical");
    }
    
    
    
    //折线图
 
    
    function zx(json){
        var chart = new AmCharts.AmSerialChart();
        chart.dataProvider = json;
        chart.categoryField = "name";
        chart.angle = 30;
        chart.depth3D = 20;
        //标题
        //chart.addTitle("3D折线图Demo", 15);  
        var graph = new AmCharts.AmGraph();
        chart.addGraph(graph);
        graph.valueField = "value";
        //背景颜色透明度
        graph.fillAlphas = 0.3;
        //类型
        graph.type = "line";
        //圆角
        graph.bullet = "round";
        //线颜色
        graph.lineColor = "#8e3e1f";
        //提示信息
        graph.balloonText = "[[name]]: [[value]]";
        var categoryAxis = chart.categoryAxis;
        categoryAxis.autoGridCount = false;
        categoryAxis.gridCount = json.length;
        categoryAxis.gridPosition = "start";
        chart.write("line");
    }
    
    
    
    
    
    //饼图
    //根据json数据生成饼状图，并将饼状图显示到div中
    function MakeChart(value) {
        chartData = eval(value);
        //饼状图
        chart = new AmCharts.AmPieChart();
        chart.dataProvider = chartData;
        //标题数据
        chart.titleField = "name";
        //值数据
        chart.valueField = "value";
        //边框线颜色
        chart.outlineColor = "#fff";
        //边框线的透明度
        chart.outlineAlpha = .8;
        //边框线的狂宽度
        chart.outlineThickness = 1;
        chart.depth3D = 20;
        chart.angle = 30;
        chart.write("pie");
    }
</script>

